<template>
	<view class="padding">
		<gui-page-loading ref="guipageloading"></gui-page-loading>
		<view class="in-title">注册哗啦哗啦</view>
		<view class="in-desc" v-if="reg_open">欢迎来到哗啦哗啦，这里有你想要的一切</view>
		<view class="in-desc" v-if="reg_open && reg_num > 0">
			<text>今天剩余</text>
			<text class="margin-lr-xs text-blue text-number">{{reg_num}}</text>
			<text>可注册人数</text>
		</view>
		<view class="in-desc" v-if="reg_open == false && reg_num < 1">
			<text class="text-bold text-red">今日人数已满，暂时关闭注册，请明天再来</text>
		</view>

		<view style="height: 50rpx;"></view>
		<!-- 表单开始 -->
		<form @submit="submit">
			<view class="xiong-input-item xiong-input-border margin-bottom">
				<input type="number" name="phone" class="xiong-input in-input-number" v-model="phone"
					placeholder="注册手机号" placeholder-class="xiong-phcolor" maxlength="11" />
			</view>
			<view class="xiong-input-item xiong-input-border margin-bottom">
				<input type="number" name="verify" class="xiong-input in-input-number" placeholder="短信验证码"
					placeholder-class="xiong-phcolor" maxlength="6" />
				<view class="text-blue" @tap="getVCode">{{vcodeBtnName}}</view>
			</view>
			<view class="xiong-input-item xiong-input-border margin-bottom">
				<input type="password" name="password" class="xiong-input in-input-number" placeholder="设登录密码"
					placeholder-class="xiong-phcolor" maxlength="15" />
			</view>
			<view class="xiong-input-item xiong-input-border">
				<input name="code" class="xiong-input in-input-number" placeholder="上级邀请码"
					placeholder-class="xiong-phcolor" maxlength="6" v-if="!code" />
				<input name="code" class="xiong-input in-input-number" disabled :value="code" v-else />
			</view>

			<!-- 提交按钮 -->
			<view class="padding-top margin-top-xl">
				<button class="xBtn" formType="submit" :loading="btnStatus" :disabled="btnStatus" v-if="reg_open">
					<text>提交注册</text>
				</button>
				<button class="xBtn" disabled v-else>
					<text class="text-desc">今日注册人数已满</text>
				</button>
			</view>
		</form>
		<!-- 默认选中协议 -->
		<view class="xieyi">
			<gui-radio @change="radioChange" :checked="xieyi" class="radio">
				<view class="flex text-xs">
					<text class="">我同意并遵守</text>
					<text class="text-blue" @tap.stop.prevent="onPage('page_regxieyi')">《服务协议》</text>
					<text class="">和</text>
					<text class="text-blue" @tap.stop.prevent="onPage('page_yinsi')">《隐私政策》</text>
				</view>
			</gui-radio>
		</view>

		<!-- 登录页面 -->
		<!-- <view class="margin-top-xl text-sm text-center" @click="goLogin()">已有账号？去登录</view> -->

		<!-- 下载app -->
		<view class="margin-top-xl" style="margin-top: 150rpx;">
			<a class="xBtn" :href="app.edition_url">
				下载哗啦哗啦
				<text class="version">V {{app.edition_name}}</text>
			</a>
			<view class='omit' style="text-align: center;" @click="copy(app.edition_url)">点击复制下载地址</view>
			<a class="xBtn margin-top" :href="task.url">
				下载哗啦任务
				<!-- <text class="version">V 1.1.1</text> -->
			</a>
			<view class='omit' style="text-align: center;" @click="copy(task.url)">点击复制下载地址</view>
		</view>
	</view>
</template>

<script>
	var self;
	import graceChecker from "@/Grace6/js/checker.js";
	export default {
		data() {
			return {
				code: '',
				phone: '',
				vcodeBtnName: "发送验证码",
				countNum: 120,
				countDownTimer: null,
				xieyi: true,
				reg_num: 0,
				reg_open: true,
				btnStatus: false,

				//下载
				task: {},
				app: {},
			}
		},
		onLoad(opt) {
			self = this;
			this.code = opt.code;
			// 获取下载数据
			this.get()
			if (uni.tool.checkLoginStatus()) uni.tool.onback();
			this.$nextTick(() => {
				this.getLimitRegister();
			})
		},
		methods: {
			getLimitRegister() {
				this.$refs.guipageloading.open();
				uni.http.post('in/limitRegister', '', res => {
					this.reg_num = res.reg_num;
					this.reg_open = res.reg_open;
					this.$refs.guipageloading.close();
				}, err => {
					this.$refs.guipageloading.close();
				});
			},
			// 发送验证码
			getVCode: function() {
				if (!uni.tool.checkPhone(this.phone)) {
					uni.tool.msg('请正确填写手机号码');
					return false;
				}
				// vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
				if (this.vcodeBtnName != '发送验证码' && this.vcodeBtnName != '重新发送') {
					return;
				}
				this.vcodeBtnName = "发送中...";
				// 与后端 api 交互，发送验证码 【自己写的具体业务代码】
				// 发送短信
				uni.http.post('in/sendsms', {
					phone: this.phone
				}, res => {
					// 倒计时
					this.countNum = 60;
					this.countDownTimer = setInterval(() => {
						this.countDown();
					}, 1000);
				}, err => {
					this.countNum = 0;
					clearInterval(this.countDownTimer);
					this.vcodeBtnName = "重新发送";
					return;
				});

			},
			// 倒计时
			countDown: function() {
				if (this.countNum < 1) {
					clearInterval(this.countDownTimer);
					this.vcodeBtnName = "重新发送";
					return;
				}
				this.countNum--;
				this.vcodeBtnName = this.countNum + '秒重发';
			},
			// 提交
			submit: function(e) {
				// 在卡一下
				if (this.reg_open == false) {
					return uni.tool.msg('注册人数已满请明天注册');
				}

				var formData = e.detail.value;

				//定义表单规则
				var rule = [{
						name: "phone",
						checkType: "phone",
						checkRule: "",
						errorMsg: "手机号码有误"
					},
					{
						name: "verify",
						checkType: "string",
						checkRule: "4,6",
						errorMsg: "短信验证码错误"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "6,12",
						errorMsg: "密长度6~12位"
					},
					{
						name: "code",
						checkType: "string",
						checkRule: "6",
						errorMsg: "请填写正确邀请码"
					},
				];
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					formData.source = uni.tool.client() || '';
					if (this.xieyi == false) {
						uni.tool.msg('请同意用户使用协议');
						return false;
					}
					// 提交注册
					this.btnStatus = true;
					uni.http.post('in/reg', formData, function(res) {
						self.btnStatus = false;
						uni.setStorageSync('token', res);
						uni.tool.go('down', 'reLaunch', 1300);
					}, err => {
						self.btnStatus = false;
					});
					// 根据项目需要完成数据验证工作
				} else {
					uni.tool.msg(graceChecker.error);
				}
			},
			goLogin() {
				uni.tool.go('login');
			},
			radioChange(e) {
				this.xieyi = !this.xieyi
			},
			onPage(type) {
				uni.tool.go('/pages/page/page?type=' + type);
			},
			//下载
			get() {
				//任务路径
				uni.http.post('data/getTaskAppDesc', {
					keys: 'page_taskapp_desc'
				}, res => {
					this.task = res;
				});
				//哗啦路径
				uni.http.post('data/getUpdate', {}, res => {
					this.app = res
				});
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function() {
						//调用方法成功
						console.log('success');
					},
					fail: function() {

					}
				})
			}

		}
	}
</script>

<style>
	page {
		background-color: #fff;
		padding: 30rpx 30rpx 30rpx 30rpx;
	}

	/* #ifdef H5 */
	page {
		background-color: #fff;
		padding: 50rpx 30rpx 30rpx 30rpx;
	}

	/* #endif */
	.xieyi {
		/* position: fixed;
		bottom: 50rpx;
		left: 0;
		right: 0;
		margin: auto;*/
		margin: 80rpx auto 0;
		/* width: 510rpx; */
	}

	.in-desc {
		margin: 10rpx 0;
	}

	.version {
		font-size: 24rpx;
		background-color: red;
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 10rpx;
	}

	.progress-box {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 85%;
		padding: 10rpx;
		background-color: #FFF;
		border-radius: 10rpx;
	}

	.xBtn {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		border-radius: 10rpx;
		overflow: hidden;
		text-decoration: none;
	}

	.omit {
		width: 100%;
		white-space: nowrap;
		/* 禁止文本换行 */
		overflow: hidden;
		/* 隐藏超出范围的内容 */
		text-overflow: ellipsis;
		/* 使用省略号 */
	}
</style>